<template>
    <div class="fab-container">
        <!-- 悬浮按钮 -->
        <t-button class="fab-button" shape="circle" size="large" theme="primary" @click="handleClick">
            <t-icon name="add" size="24" />
        </t-button>
    </div>
</template>

<script setup lang="ts">
const handleClick = () => {
    alert('悬浮按钮被点击了！');
};
</script>

<style scoped>
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-button {
    width: 56px;
    height: 56px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-button:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}
</style>